import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Breadcrumb, Drawer, Card ,Alert} from 'antd';
import { useSelector, useDispatch } from "umi"
import { FileZipOutlined } from '@ant-design/icons';
import styles from './setting.less'

const { TextArea } = Input

const btnData = ["系统设置", "国际化设置", "SEO设置", "数据统计", "OSS设置", "SMTP服务"]

const Setting: React.FC = () => {
    let [visible, setVisible] = useState(false)
    const [page, setPage] = useState(1)
    const [size, setSize] = useState(12)

    const [xia, setXia] = useState(0)

    const state = useSelector((state: { setting: any }) => state.setting)
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch({
            type: "setting/query",
        })

    }, [])

    useEffect(() => {
        dispatch({
            type: "setting/visible",
            payload: {
                page,
                size
            }
        })

    }, [visible])

    const onClose = () => {
        setVisible(false)
    };


    // 抽屉
    const [form] = Form.useForm();

    const onFinish = (values: any) => {
        console.log(values);
    };

    const onReset = () => {
        form.resetFields();
    };

    return <div className={styles.setting}>
        <div>
            <div className={styles.bread}>
                <Breadcrumb>
                    <Breadcrumb.Item>工作台</Breadcrumb.Item>
                    <Breadcrumb.Item>系统设置</Breadcrumb.Item>
                </Breadcrumb>
            </div>
        </div>
        <div>

            <div>
                {
                    btnData.map((item, index) => {
                        return <p key={item} className={index == xia ? styles.active : ""} onClick={() => { setXia(index) }}>{item}</p>
                    })
                }
            </div>
            <div>
                <div style={xia == 0 ? { display: "block" } : { display: "none" }}>
                    <Form
                        layout="vertical"
                    >
                        <Form.Item label="系统地址">
                            <Input value={state.systemUrl} />
                        </Form.Item>

                        <Form.Item
                            label="后台地址"
                        >
                            <Input value={state.adminSystemUrl} />
                        </Form.Item>

                        <Form.Item
                            label="系统标题"
                        >
                            <Input value={state.systemTitle} />
                        </Form.Item>

                        <Form.Item
                            label="LOGO"

                        >
                            <Input value={state.systemLogo} addonAfter={<FileZipOutlined onClick={() => { setVisible(true) }} />} />
                        </Form.Item>

                        <Form.Item
                            label="Favicon"
                        >
                            <Input value={state.systemFavicon} addonAfter={<FileZipOutlined onClick={() => { setVisible(true) }} />} />
                        </Form.Item>

                        <Form.Item
                            label="页面脚本"
                        >
                            <TextArea style={{ height: "100px" }} value={state.systemFooterInfo} />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary">保存</Button>
                        </Form.Item>
                    </Form>
                </div>
                <div style={xia == 1 ? { display: "block" } : { display: "none" }}>
                    <Button type="primary">保存</Button>
                </div>
                <div style={xia == 2 ? { display: "block" } : { display: "none" }}>
                    <Form
                        layout="vertical"
                    >
                        <Form.Item label="关键词">
                            <Input value="JavaScript,TypeScript,Vue.js,微信小程序,React.js,正则表达式,WebGL,Webpack,Docker,MVVM,nginx,java" />
                        </Form.Item>

                        <Form.Item
                            label="描述信息"
                        >
                            <TextArea style={{ height: "100px" }} value="“小楼又清风”是 fantasticit（https://github.com/fantasticit）的个人小站。本站的文章包括：前端、后端等方面的内容，也包括一些个人读书笔记。" />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary">保存</Button>
                        </Form.Item>
                    </Form>
                </div>
                <div style={xia == 3 ? { display: "block" } : { display: "none" }}>
                    <Form
                        layout="vertical"
                    >
                        <Form.Item label="百度统计">
                            <Input value="2f616121a4be61774c494d106870f30e" />
                        </Form.Item>

                        <Form.Item
                            label="谷歌分析"
                        >
                            <TextArea style={{ height: "100px" }} value="G-10SK76KWMS" />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary">保存</Button>
                        </Form.Item>
                    </Form>
                </div>
                <div style={xia == 4 ? { display: "block" } : { display: "none" }}>
                    <Alert
                        message="说明"
                        description='请在编辑器中输入您的 oss 配置，并添加 type 字段区分 {"type":"aliyun","accessKeyId":"","accessKeySecret":"","bucket":"","https":true,"region":""}'
                        type="info"
                        showIcon
                    />
                    <div style={{height:"200px"}}>

                    </div>
                     <Button type="primary">保存</Button>
                </div>
                <div style={xia == 5 ? { display: "block" } : { display: "none" }}>
                    <Form
                        layout="vertical"
                    >
                        <Form.Item label="SMTP地址">
                            <Input placeholder="请输入SMTP" />
                        </Form.Item>

                        <Form.Item label="SMTP端口（强制使用SSL连接）">
                            <Input placeholder="请输入smtp端口" />
                        </Form.Item>

                        <Form.Item label="SMTP用户">
                            <Input placeholder="请输入SMTP" />
                        </Form.Item>

                        <Form.Item label="SMTP密码">
                            <Input placeholder="也有可能是授权码" />
                        </Form.Item>

                        <Form.Item label="发件人">
                            <Input placeholder="请输入正确的邮箱地址" />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary">保存</Button>
                            <Button htmlType="button" style={{ marginLeft: "5px" }}>测试</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
        <Drawer
            closable={false}
            onClose={onClose}
            visible={visible}
            width={780}
        >
            <div className={styles.visibleFrom}>
                <Form form={form} name="control-hooks" onFinish={onFinish} style={{ display: "flex" }}>
                    <Form.Item name="originalname" label="文件名">
                        <Input />
                    </Form.Item>

                    <Form.Item name="type" label="文件类">
                        <Input />
                    </Form.Item>

                    <Form.Item style={{ position: "absolute", top: "60px", right: "30px" }}>
                        <Button type="primary" htmlType="submit" style={{ marginRight: "10px" }}>
                            搜索
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <div>
                <Card>
                    {
                        state.visibleList?.map((item: any) => {
                            return <Card.Grid key={item.id} style={{ width: "170px", height: "200px", overflow: "hidden", marginLeft: "13px", marginTop: "30px" }}>
                                <dl key={item.id}>
                                    <dt style={{ width: "170px", height: "120px", background: `url(${item.url}) 170px 196px`, backgroundSize: "170px 290px" }}>
                                        {/* <img src={item.url} alt="" /> */}
                                    </dt>
                                    <dd style={{ textAlign: "center", lineHeight: "20px", marginTop: "10px" }}>{item.originalname}</dd>
                                </dl>
                            </Card.Grid>
                        })
                    }
                </Card>,
            </div>
        </Drawer>
    </div>
}
export default Setting